
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { MessageSquare, Heart, Share2, Plus } from "lucide-react";

export const TeacherDiscussionFeed = () => {
  const posts = [
    {
      id: 1,
      author: "Dr. Sarah Chen",
      role: "Math Teacher",
      time: "2 hours ago",
      type: "question",
      title: "How do you handle different learning paces in calculus?",
      content: "I'm struggling with students who grasp concepts at very different speeds. Some are ready for advanced integration while others are still working on basic derivatives.",
      tags: ["Mathematics", "Differentiation", "Classroom Management"],
      likes: 12,
      comments: 8,
      avatar: "https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher1"
    },
    {
      id: 2,
      author: "Prof. Michael Johnson",
      role: "Science Teacher",
      time: "4 hours ago",
      type: "tip",
      title: "Game-changing lab safety visualization technique",
      content: "I created AR safety demos using simple phone apps. Students can see potential hazards in 3D before entering the lab. Accidents down 40% this semester!",
      tags: ["Science", "Safety", "AR Technology", "Innovation"],
      likes: 28,
      comments: 15,
      avatar: "https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher2"
    },
    {
      id: 3,
      author: "Lisa Martinez",
      role: "English Teacher",
      time: "6 hours ago",
      type: "resource",
      title: "Free Creative Writing Prompt Generator",
      content: "Built a simple tool that generates writing prompts based on student interests and current events. Link in comments - feel free to use and modify!",
      tags: ["English", "Creative Writing", "Tools", "Free Resource"],
      likes: 35,
      comments: 22,
      avatar: "https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher3"
    }
  ];

  const getPostTypeColor = (type: string) => {
    switch (type) {
      case 'question': return 'bg-blue-100 text-blue-800';
      case 'tip': return 'bg-green-100 text-green-800';
      case 'resource': return 'bg-purple-100 text-purple-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getPostTypeLabel = (type: string) => {
    switch (type) {
      case 'question': return 'Question';
      case 'tip': return 'Teaching Tip';
      case 'resource': return 'Resource';
      default: return 'Discussion';
    }
  };

  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg font-semibold flex items-center gap-2">
            <MessageSquare className="w-5 h-5 text-blue-600" />
            Discussion Feed
          </CardTitle>
          <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
            <Plus className="w-4 h-4 mr-2" />
            Start a Discussion
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="all" className="w-full">
          <TabsList className="grid w-full grid-cols-4 mb-6">
            <TabsTrigger value="all">All</TabsTrigger>
            <TabsTrigger value="questions">Questions</TabsTrigger>
            <TabsTrigger value="tips">Tips</TabsTrigger>
            <TabsTrigger value="resources">Resources</TabsTrigger>
          </TabsList>

          <TabsContent value="all" className="space-y-6">
            {posts.map((post) => (
              <div key={post.id} className="border rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                <div className="flex space-x-4">
                  <Avatar>
                    <AvatarImage src={post.avatar} />
                    <AvatarFallback>{post.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2 mb-2">
                      <span className="font-medium text-gray-900 dark:text-gray-100">{post.author}</span>
                      <Badge variant="outline" className="text-xs">{post.role}</Badge>
                      <Badge className={`text-xs ${getPostTypeColor(post.type)}`}>
                        {getPostTypeLabel(post.type)}
                      </Badge>
                      <span className="text-gray-500 dark:text-gray-400 text-sm">· {post.time}</span>
                    </div>
                    <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">{post.title}</h3>
                    <p className="text-gray-700 dark:text-gray-300 mb-3">{post.content}</p>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {post.tags.map((tag, index) => (
                        <Badge key={index} variant="secondary" className="text-xs">{tag}</Badge>
                      ))}
                    </div>
                    <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                      <button className="hover:text-blue-600 flex items-center">
                        <MessageSquare className="w-4 h-4 mr-1" />
                        <span>{post.comments} Comments</span>
                      </button>
                      <button className="hover:text-green-600 flex items-center">
                        <Heart className="w-4 h-4 mr-1" />
                        <span>{post.likes} Likes</span>
                      </button>
                      <button className="hover:text-purple-600 flex items-center">
                        <Share2 className="w-4 h-4 mr-1" />
                        <span>Share</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </TabsContent>

          <TabsContent value="questions" className="space-y-6">
            {posts.filter(post => post.type === 'question').map((post) => (
              <div key={post.id} className="border rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                <div className="flex space-x-4">
                  <Avatar>
                    <AvatarImage src={post.avatar} />
                    <AvatarFallback>{post.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2 mb-2">
                      <span className="font-medium text-gray-900 dark:text-gray-100">{post.author}</span>
                      <Badge variant="outline" className="text-xs">{post.role}</Badge>
                      <span className="text-gray-500 dark:text-gray-400 text-sm">· {post.time}</span>
                    </div>
                    <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">{post.title}</h3>
                    <p className="text-gray-700 dark:text-gray-300 mb-3">{post.content}</p>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {post.tags.map((tag, index) => (
                        <Badge key={index} variant="secondary" className="text-xs">{tag}</Badge>
                      ))}
                    </div>
                    <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                      <button className="hover:text-blue-600 flex items-center">
                        <MessageSquare className="w-4 h-4 mr-1" />
                        <span>{post.comments} Comments</span>
                      </button>
                      <button className="hover:text-green-600 flex items-center">
                        <Heart className="w-4 h-4 mr-1" />
                        <span>{post.likes} Likes</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </TabsContent>

          <TabsContent value="tips" className="space-y-6">
            {posts.filter(post => post.type === 'tip').map((post) => (
              <div key={post.id} className="border rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                <div className="flex space-x-4">
                  <Avatar>
                    <AvatarImage src={post.avatar} />
                    <AvatarFallback>{post.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2 mb-2">
                      <span className="font-medium text-gray-900 dark:text-gray-100">{post.author}</span>
                      <Badge variant="outline" className="text-xs">{post.role}</Badge>
                      <span className="text-gray-500 dark:text-gray-400 text-sm">· {post.time}</span>
                    </div>
                    <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">{post.title}</h3>
                    <p className="text-gray-700 dark:text-gray-300 mb-3">{post.content}</p>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {post.tags.map((tag, index) => (
                        <Badge key={index} variant="secondary" className="text-xs">{tag}</Badge>
                      ))}
                    </div>
                    <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                      <button className="hover:text-blue-600 flex items-center">
                        <MessageSquare className="w-4 h-4 mr-1" />
                        <span>{post.comments} Comments</span>
                      </button>
                      <button className="hover:text-green-600 flex items-center">
                        <Heart className="w-4 h-4 mr-1" />
                        <span>{post.likes} Likes</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </TabsContent>

          <TabsContent value="resources" className="space-y-6">
            {posts.filter(post => post.type === 'resource').map((post) => (
              <div key={post.id} className="border rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                <div className="flex space-x-4">
                  <Avatar>
                    <AvatarImage src={post.avatar} />
                    <AvatarFallback>{post.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2 mb-2">
                      <span className="font-medium text-gray-900 dark:text-gray-100">{post.author}</span>
                      <Badge variant="outline" className="text-xs">{post.role}</Badge>
                      <span className="text-gray-500 dark:text-gray-400 text-sm">· {post.time}</span>
                    </div>
                    <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">{post.title}</h3>
                    <p className="text-gray-700 dark:text-gray-300 mb-3">{post.content}</p>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {post.tags.map((tag, index) => (
                        <Badge key={index} variant="secondary" className="text-xs">{tag}</Badge>
                      ))}
                    </div>
                    <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                      <button className="hover:text-blue-600 flex items-center">
                        <MessageSquare className="w-4 h-4 mr-1" />
                        <span>{post.comments} Comments</span>
                      </button>
                      <button className="hover:text-green-600 flex items-center">
                        <Heart className="w-4 h-4 mr-1" />
                        <span>{post.likes} Likes</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
};
